<template>
    <div id="contract_details">
        <div class="body">
            <el-row class="title">
                <el-col :span="4">入库单</el-col>
                <el-col :span="4" :offset="16" v-if="detailData.state === 0">
                    <el-button @click="finish_in">入库完成</el-button>
                </el-col>
                <el-col :span="3" :offset="17" v-else-if="detailData.state === 1">
                    <el-button v-print="'#in_print'">打印</el-button>
                </el-col>
            </el-row>
            <el-form label-width="160px" style="overflow:hidden;padding-top:20px" >
                <el-form-item label="入库单单号：" class="inline__">
                    {{detailData.inDan}}
                </el-form-item>
                <el-form-item label="采购单单号：" class="inline__">
                    {{detailData.caigou.caiDan}}
                </el-form-item>
                <el-form-item label="入库员：" class="inline__">
                    {{detailData.emp.empName}}
                </el-form-item>
                <el-form-item label="采购员：" class="inline__">
                    {{detailData.caigou.emp.empName}}
                </el-form-item>
                <el-form-item label="入库日期：" class="inline__">
                    {{detailData.inDate}}
                </el-form-item>
                <el-form-item label="供货商：" class="inline__">
                    {{detailData.caigou.appCai.supplier.supplierName}}
                </el-form-item>
                <el-form-item label="订单状态：">
                    {{detailData.state==0?"未入库":"已入库"}}
                </el-form-item>
                <el-form-item label="备注：">
                    {{detailData.remark?detailData.remark:"无"}}
                </el-form-item>
            </el-form>
            <div style="margin-left: 20px">
                入库产品：
            </div>
            <el-table :data="detailData.caigou.appCai.appDetail" style="padding:5px;">
                <el-table-column prop="proDetail.proDetailId" label="产品编号" align="center"></el-table-column>
                <el-table-column label="产品图片" prop="proDetail.proImgSrc" align="center">
                    <template slot-scope="s">
                        <el-image :src="s.row.proDetail.proImgSrc" style="width:50px;height:50px"></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="proDetail.product.productName" label="产品名称" align="center"></el-table-column>
                <el-table-column prop="proDetail.product.productBrand" label="产品品牌" align="center"></el-table-column>
                <el-table-column prop="proDetail.product.proClassily.proClassilyName" label="产品分类" align="center"></el-table-column>
                <el-table-column prop="appCount" label="入库数量" align="center"></el-table-column>
                <el-table-column prop="proDetail.wareNum" label="库存数量" align="center"></el-table-column>
                <el-table-column prop="proDetail.abilities" label="规格属性" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="s">
                        <span v-for="item in s.row.proDetail.abilities" :key="item.abilityId">{{item.abilityName}} </span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!--打印-->
        <in_print :inw="detailData" style="position: relative;z-index: -1"></in_print>
    </div>
</template>

<script>
    import in_print from "./in_print";

    export default {
        name:"in_detail",
        components:{
            in_print
        },
        data() {
            return {
                //详情页面的数据
                detailData: {}
            }
        },
        methods:{
            //入库完成
            finish_in(){
                this.detailData.caigou.appCai.appDetail.forEach(pro=>{
                    let wareNum=pro.proDetail.wareNum+pro.appCount;
                    this.axios.get("api/ware/change-num",{params:{"proDetailId":pro.proDetail.proDetailId,"wareNum":wareNum,"proNum":pro.proDetail.proNum}}).then(()=>{
                        this.axios.get("api/ware/change-instate",{params:{"judge":1,"outId":this.detailData.inId}}).then(()=>{
                            pro.proDetail.wareNum=wareNum
                            this.detailData.state=1
                        }).catch()
                    }).catch()
                })
                this.global.mes_success("入库成功");
            }
        },
        created(){
            this.detailData = JSON.parse(sessionStorage.getItem("in"));
            sessionStorage.removeItem("in")
        },
        /* 路由守卫 */
        beforeRouteEnter (to, from, next){
            if (sessionStorage.getItem("in")){
                next()
            }else{
                next({path:"/in_index"})
            }
        }
    }
</script>

<style scoped>
    #contract_details{margin: 0 auto; width: 1000px;}
    #contract_details .top{margin: 0 auto;width: 100%}
    .top .el-steps {background-color: #e9eef3;width:70%;margin-left: 120px}
    .body{background-color: #ffffff;width: 100%;}
    .title{border-bottom: 1.5px solid #ababab;margin:0 10px}
    .title .el-col{padding: 10px;font-size: 16px;line-height: 60px;}
    .inline__{width:50%!important;display:inline-block}
</style>